<template>
	<view>
		<u-navbar class="navbar" :border-bottom="false" title="评价" :title-size="36" :title-bold="true" :title-color="textColor" :background="{backgroundColor: bgColor}" >
			<template #right>
				<view class="u-m-r-35" >
					<u-button shape="circle" :hair-line="false" hover-class="none" :custom-style="getBtStyle('plain', -1, 65, -1, themeColor)" @click="handleSubmit">发布</u-button>
				</view>
			</template>
		</u-navbar>
		<view class="box-color box-padding u-m-b-20" v-for="(item, index) in list" :key="index">
			<view class="u-flex u-m-b-20">
				<view>
					<image :src="item.url" style="width: 100rpx;height: 100rpx;border-radius: 10rpx;" mode=""></image>
				</view>
				<view class="u-m-l-20 u-flex-col u-row-around" style="height: 100rpx;">
					<view>{{ item.itemName}}</view>
					<text class="u-font-24 grey-color">{{ item.specification }}</text>
				</view>
			</view>
			<!-- 商品评分 -->
			<view style="height: 85rpx;line-height: 85rpx;">
				<text>商品评价</text>
				<u-rate :count="5" v-model="item.score" :min-count="1" :active-color="themeColor" :gutter="18" inactive-icon="star-fill" class="u-m-l-20"></u-rate>
			</view>
			<!-- 商品评价 -->
			<view style="height: 260rpx;">
				<u-field
					:label-width="labelWidth"
					:border-bottom="false"
					placeholder-style="font-size: 30rpx;"
					:field-style="{fontSize: '30rpx', maxHeight: '200rpx', overflowY: 'scroll'}"
					v-model="item.comment"
					placeholder="对商品进行描述"
					:maxlength="100"
					type="textarea"
					>
						<view slot="icon">
							<image src="/static/bianji.png" style="width: 30rpx;height: 30rpx;margin-top: 8rpx;" mode=""></image>
						</view>
					</u-field>
			</view>
		</view>
		
		<view class="box-color box-padding u-m-b-20">
			<!-- 商品评分 -->
			<view style="height: 85rpx;line-height: 85rpx;">
				<text>送货评价</text>
				<u-rate :count="5" :min-count="1" v-model="score" :active-color="themeColor" :gutter="18" inactive-icon="star-fill" class="u-m-l-20"></u-rate>
			</view>
			<!-- 商品评价 -->
			<view style="height: 260rpx;">
				<u-field
					:label-width="labelWidth"
					:border-bottom="false"
					placeholder-style="font-size: 30rpx;"
					:field-style="{fontSize: '30rpx', maxHeight: '200rpx', overflowY: 'scroll'}"
					v-model="comment"
					placeholder="对送货进行描述"
					:maxlength="100"
					type="textarea"
					>
						<view slot="icon">
							<image src="/static/bianji.png" style="width: 30rpx;height: 30rpx;margin-top: 8rpx;" mode=""></image>
						</view>
					</u-field>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: null,
				list: [],
				score: 5,
				comment: ''
			}
		},
		onLoad(options) {
			this.id = options.id
			this.getOrderDetail()
		},
		computed: {
			labelWidth() {
				let width = 30
				if (this.content) {
					width = 0
				}
				return width
			},
			isShow() {
				return this.content == ''
			}
		},
		methods: {
			async getOrderDetail() {
				const res = await this.$http.get('api/Trade/GetPurchaseTradeDetail', { params: { id: this.id } })
				console.log(res)
				for (let i = 0; i < res.orderItems.length; i++) {
					res.orderItems[i].score = 5
				}
				this.list = res.orderItems
				// this.statusInfo = this.$store.getters['order/orderStatus'].find(item => {
				// 	return item.state == 2 // 待付款
				// })
			},
			async handleSubmit() {
				if (!this.comment) {
					return this.$u.toast('送货评价不能为空')
				}
				let flag = true
				const list = this.list
				let arr = []
				for (let i = 0; i < list.length; i++) {
					if (!list[i].comment) {
						flag = false
						break;
					}
					arr.push({
						tradeId: this.id,
						itemId: list[i].itemId,
						score: list[i].score,
						comment: list[i].comment,
						type: 1
					})
				}
				if (!flag) return this.$u.toast('商品评价不能为空')
				arr.push({
					tradeId: this.id,
					score: this.score,
					comment: this.comment,
					type: 2
				})
				const res = await this.$http.post('api/Trade/SaveTradeComment', arr)
				this.$u.toast('评价成功', 1000, 'success')
				this.$mHelper.delayedJump('/pages/purchase/order/index', 'redirectTo')
			},
			back() {
				this.$mRouter.redirectTo({ route: '/pages/purchase/order/index?current=4' })
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-field {
		padding: 30rpx 0;
	}
</style>
